<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="自动归档" name="first">
        <wise-crud v-if="activeName==='first'" ref="wise-crud" :urls="urls" :fields="fields" :filters="filters"
          :handle="handle">
          <template slot="outHandle">
            <el-col :span="3">
              <el-button v-if="total < 1" type="primary" @click="handleAdd">
                <i class="el-icon-plus" />
                添加
              </el-button>
            </el-col>
          </template>
          <template v-slot:handle="slotProps">
            <el-button v-if="slotProps.row.confirmStatus === 0" type="primary" size="small" class="activeBtn" round
              @click.native.prevent="editHandle(slotProps.row)" :loading="isLoading">编辑</el-button>
            <el-button type="info" size="small" class="activeBtn" round
              @click.native.prevent="viewHandle(slotProps.row)">查看
            </el-button>
          </template>
        </wise-crud>
      </el-tab-pane>
      <el-tab-pane label="手动归档" name="second">
        <Artificial v-if="activeName==='second'" :type="8" />
      </el-tab-pane>
    </el-tabs>

    <hot-ticket-form ref="form" @reload="reload" />
    <hot-ticket-table ref="hotTicketTable" />
  </div>
</template>

<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import HotTicketForm from './HotTicketForm.vue'
  import HotTicketTable from './HotTicketTable.vue'
  import Artificial from '../components/Artificial.vue'
  import {
    dateFormat
  } from '../../../../../filters'
  export default {
    name: 'WarehouseManage',
    components: {
      WiseCrud,
      HotTicketForm,
      HotTicketTable,
      Artificial
    },
    data() {
      return {
        activeName: 'first',
        handle: [],
        isLoading: false,
        urls: {
          list: '/api/v1/welder-sbtx-second/hot-ticket-comb/list'
        },
        fields: [{
            label: '编号',
            prop: 'serialNumber',
            type: 'text',
            use: ['table']
          },
          {
            label: '流水号',
            prop: 'singleNumber',
            type: 'text',
            use: ['table']
          },
          {
            label: '申请动火单位',
            prop: 'applyHotUnit',
            type: 'text',
            use: ['table']
          },
          {
            label: '动火施工单位',
            prop: 'hotConstructionUnit',
            type: 'text',
            use: ['table']
          },
          {
            label: '动火级别',
            prop: 'hotLevel',
            type: 'text',
            use: ['table']
          },
          {
            label: '动火地点',
            prop: 'hotPlace',
            type: 'text',
            use: ['table']
          },
          {
            label: '动火时间',
            prop: 'hotTime',
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            use: ['table']
          },
          {
            label: '动火内介质',
            prop: 'hotInnerMedium',
            type: 'text',
            use: ['table']
          },
          {
            label: '状态',
            prop: 'construction',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              return h('div', row.confirmStatus === 0 ? '未确认' : '已确认')
            }
          },
          {
            label: '延期开始时间',
            prop: 'delayInfo.startTime',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              return h('div', row.delayInfo ? dateFormat(row.delayInfo.startTime, 'YYYY-MM-DD HH:mm') : null)
            }
          },
          {
            label: '延期结束时间',
            prop: 'delayInfo.endTime',
            type: 'render',
            use: ['table'],
            tableRender: (h, row, index) => {
              return h('div', row.delayInfo ? dateFormat(row.delayInfo.endTime, 'YYYY-MM-DD HH:mm') : null)
            }
          },
          {
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: [],
            tableWidth: 200
          }
        ],
        dialog: false,
        total: 0
      }
    },
    computed: {
      spaceId() {
        return this.$store.getters.spaceId
      },
      filters() {
        return [{
            field: 'spaceId',
            operator: 'EQUALS',
            value: this.spaceId
          },
          {
            field: 'type',
            operator: 'EQUALS',
            value: 1
          }
        ]
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs['form'].$on('refreshTable', () => {
          this.$refs['wise-crud'].handleSearch(0)
        })
        this.$refs['wise-crud'].$refs['wiseTable'].$watch('ts', ts => {
          this.total = ts
        })
      })
    },
    methods: {
      reload() {
        this.isLoading = false
      },
      handleAdd() {
        this.$refs['form'].showAddDsalog()
      },
      editHandle({
        id
      }) {
        this.isLoading = true
        this.$refs['form'].showAddDsalog(id)
        // this.$refs['form'].dialog = true
      },
      viewHandle({
        id
      }) {
        this.$refs['hotTicketTable'].getObjectId(id)
        this.$refs['hotTicketTable'].dialog = true
      }
    }
  }
</script>

<style lang="scss" scoped></style>